﻿@using YYBlog.Core.Extensions
@inherits Nancy.ViewEngines.Razor.NancyRazorViewBase<YYBlog.Core.ViewProjections.Home.BlogPostDetailsViewModel>
@{
    Layout = "_DetailLayout.cshtml";
}
@section PostStyle{
    <link href="/Content/css/prism.min.css" rel="stylesheet" />
}
<header class="header" style="background-image:url(https://www.bing.com/ImageResolution.aspx?w=1366&h=768);height:45vh">
    <a href="#sidr" id="toggle-nav" class="btn btn-light">Menu</a>
    <div id="sidr">
        <div class="logo"><img class="rounded-circle" src="/Content/images/avatar.jpg" /></div>
        <div class="list-group" id="nav">
            <a href="/" class="list-group-item list-group-item-action">Home</a>
            <a href="/page" class="list-group-item list-group-item-action">Articles</a>
            <a href="/tags" class="list-group-item list-group-item-action">Tags</a>
            <a href="/about" class="list-group-item list-group-item-action">About</a>
            <a href="/" class="list-group-item list-group-item-action">Other</a>
        </div>
    </div>
    <div class="text-center container">
        <div class="title">
            <h1>@Model.BlogPost.Title</h1>
            <hr class="small" />
        </div>
    </div>
</header>
<main class="container text-center">
    <article class="post">
        <header class="post-title"><a href="@Model.BlogPost.GetLink()">@Model.BlogPost.Title</a></header>
        <section class="post-meta">
            <ul class="list-inline d-inline">
                @if (!string.IsNullOrEmpty(Model.BlogPost.Tags))
                {
                    foreach (var tag in Model.BlogPost.TagsArray)
                    {
                        <text>
                            <li class="list-inline-item"><a href="/tag/@tag">@tag.AsTag().Name</a></li>
                        </text>
                    }
                }
            </ul>
            <time class="post-date">@Model.BlogPost.PubDate.ToString("yyyy-MM-dd HH:mm")</time>
        </section>
        <section class="post-content">
            @Html.Raw(Model.BlogPost.Content)
        </section>
    </article>
</main>
@section PostScripts{
    <script src="/Content/js/prism.min.js"></script>
    <script>
        $(function () {
            $('#toggle-nav').sidr();
        });
    </script>
}